<template>
  <div id="folk">
    <p class="obtain" v-if="join == 0">{{obtain.community}}</p>
    <p class="huan" v-if="join == 0">欢迎您</p>
    <div class="button-block" v-if="join">
      <button @click="joinFlok">申请加入物业人员</button>
    </div>
    <div class="tip" v-if="join == 1">
      <p class="tit">申请成功</p>
      <p class="tit">业主同意后会有微信通知您!</p>
    </div>
    <div class="masking" v-if="masking && mobileType == 1">
      <i></i>
    </div>
    <div class="masking" v-if="masking && mobileType == 2">
      <div
        class="copy-link"
        v-clipboard:copy="url"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError"
      >复制链接</div>
      <p>复制链接后，发送至微信好友。</p>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "mand-mobile";
import https from "@/https";
import config from "@/config";
export default {
  components: {
    [Dialog.name]: Dialog
  },
  name: "",
  data() {
    return {
      url: "https://xm.sqyzdh.com",
      masking: false,
      obtain: {}, //小区信息
      join: 0 //申请加入？
    };
  },
  methods: {
    onCopy() {
      Toast.succeed("复制成功", 1500);
    },
    onError() {
      Toast.failed("复制失败", 2000);
    },
    getObtain() {
      let data = JSON.parse(localStorage.getItem("saveFolkParams"));
      if (!data) {
        let yid = this.$route.query.yid;
        let qid = this.$route.query.qid;
        data = {
          yid,
          qid
        };
      }
      let params = data;
      https
        .fetchPost(config.getObtain, params)
        .then(res => {
          if (res.data.code == 1) {
            this.obtain = res.data.data;
          } else {
            Toast.failed(res.data.msg, 2000);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    joinFlok() {
      let data = JSON.parse(localStorage.getItem("saveFolkParams"));
      if (!data) {
        let yid = this.$route.query.yid;
        let qid = this.$route.query.qid;
        data = {
          yid,
          qid,
          type: 2
        };
      }
      let uid = this.$store.state.userInfo.id;
      data.uid = uid;
      let params = data;
      https
        .fetchPost(config.signupEmployee, params)
        .then(res => {
          if (res.data.code == 1) {
            Toast.info("报名成功，请等待物业审核", 2000);
            this.join = 1;
          } else {
            Toast.failed(res.data.msg, 2000);
          }
          localStorage.removeItem("saveFolkParams");
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取地址栏的参数
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    }
  },
  created() {
    this.url = location.href;
    var u = navigator.userAgent,
      app = navigator.appVersion;
    var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
      this.mobileType = 1;
      console.log("这个是安卓操作系统");
      //这个是安卓操作系统
    }
    if (isIOS) {
      this.mobileType = 2;
      console.log("这个是ios操作系统"); //这个是ios操作系统
    }
    if (this.$store.state.residentialType.qid != undefined) {
      this.masking = true;
    } else if (
      this.$store.state.userInfo.mobile != undefined &&
      this.$store.state.residentialType.qid == undefined
    ) {
      this.masking = false;
      this.getObtain();
    } else {
      Toast.loading("加载中...");
      let yid = this.$route.query.yid;
      let qid = this.$route.query.qid;
      let identity = this.$route.query.identity;
      let folkParams = {
        yid,
        qid,
        type: 1
      };
      if (JSON.stringify(folkParams) != "{}") {
        localStorage.setItem("saveFolkParams", JSON.stringify(folkParams));
      }
      var code = this.getUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
      var local = encodeURIComponent("https://xm.sqyzdh.com/folkPropertyStaff");
      var APPID = "wx8d06ea96180136be";
      if (code == null || code === "" || code == this.$store.getters.getCode) {
        window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
          APPID +
          "&redirect_uri=" +
          local +
          "&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect";
      } else {
        this.$store.commit("saveCode", code);
        let params = {
          code
        };
        https
          .fetchGet(config.getLoginStatus, params)
          .then(res => {
            Toast.hide();
            if (res.data.code == 1) {
              let userInfo = res.data.data;
              this.$store.commit("saveUserInfo", userInfo);
              this.getObtain();
            } else if (res.data.code == 0) {
              let wxInfo = res.data.data;
              this.$store.commit("saveWxInfo", wxInfo);
              this.$router.replace({
                path: "/shareRegister",
                query: {
                  type: 3
                }
              });
            } else {
              Toast.failed(res.data.msg);
            }
          })
          .catch(err => {
            Toast.hide();
            console.log(err);
          });
      }
    }
  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
.obtain {
  font-size: 50px;
  color: #444;
  text-align: center;
  font-weight: 600;
  padding-top: 160px;
}
.huan {
  font-size: 34px;
  color: #444;
  text-align: center;
  padding-top: 50px;
}
.button-block {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px;
  button {
    border: none;
    width: 400px;
    height: 70px;
    // background: #555;
    background: #2f86f6;
    color: #fff;
    font-size: 32px;
    border-radius: 40px;
    outline: none;
  }
}
.tip {
  padding-top: 200px;
  p {
    text-align: center;
    font-size: 50px;
    line-height: 90px;
    color: #2f86f6;
  }
}
.masking {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.9);
  i {
    width: 555px;
    height: 522px;
    margin-top: 200px;
    background: url("")
      no-repeat;
    background-size: 100%;
  }
  .copy-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 70px;
    background: #2f86f6;
    color: #fff;
    font-size: 30px;
    border-radius: 40px;
    margin-top: 350px;
  }
  p {
    font-size: 26px;
    color: #fff;
    margin-top: 25px;
  }
}
</style>
